﻿<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- all css here -->
    <!-- bootstrap v3.3.6 css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- jquery-ui.min css -->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <!-- meanmenu css -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- nivo slider css -->
    <link rel="stylesheet" href="lib/css/nivo-slider.css" type="text/css"/>
    <link rel="stylesheet" href="lib/css/preview.css" type="text/css"/>
    <!-- owl.carousel css -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <!-- font-awesome css -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- style css -->
    <link rel="stylesheet" href="style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr js -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>


<!--header top area start-->
<div class="header_area">
    <div class="header_border">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                    <div class="header_heaft_area">
                        <div class="header_left_all">
                            <div class="mean_al_dv">
                                <div class="littele_menu"><a href="#">Language: English <i class="fa fa-caret-down"></i></a>
                                </div>
                                <ul class="option">
                                    <li><a href="#">France</a></li>
                                    <li><a href="#">Germany</a></li>
                                    <li><a href="#">Japanese</a></li>
                                </ul>
                            </div>
                            <div class="usd_area">
                                <div class="littele_menu"><a href="#">
                                    Currency: USD
                                    <i class="fa fa-caret-down"></i>
                                </a>
                                </div>
                                <ul class="option">
                                    <li><a href="#">EUR - Euro</a></li>
                                    <li><a href="#">GBP - British Pound</a></li>
                                    <li><a href="#">INR - Indian Rupee</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                    <div class="header_right_area">
                        <ul>
                            <li>
                                <a class="account" href="my.account.html">My Account</a>
                            </li>
                            <li>
                                <a class="wishlist" href="contact-us.html">wishlist</a>
                            </li>
                            <li>
                                <a class="Shopping cart" href="cart.html">Shopping cart</a>
                            </li>
                            <li>
                                <a class="Checkout" href="cart.html">Checkout</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--header top area end-->
    <!--header middle area start-->
    <div class="header_middle">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="logo_area">
                        <a href="index.html"><img src="img/logo-pic/logo.png" alt=""/></a>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="header_all search_box_area">
                        <div class="new_search" role="search" method="get">
                            <input id="mix_search" class="search-field" placeholder="Search Products…" title="Search for:" type="search">
                            <input value="Search" type="submit" id="Search-btn">
                            <input name="" value="" type="hidden">
                        </div>
                    </div>
                    <div class="header_all shopping_cart_area">
                        <div class="widget_shopping_cart_content">
                            <div class="topcart">
                                <a class="cart-toggler" href="">
                                    <i class="icon"></i>
                                    <span class="my-cart">Shopping cart</span>
                                    <span class="qty">2 Items</span>
                                    <span class="fa fa-angle-down"></span>
                                </a>
                                <div class="new_cart_section">
                                    <ol class="new-list">
                                        <!-- single item -->
                                        <li class="wimix_area">
                                            <a class="pix_product" href="">
                                                <img alt="" src="img/product-pic/7-150x98.jpg">
                                            </a>
                                            <div class="product-details">
                                                <a href="#">Adipiscing cursus eu</a>
                                                <span class="sig-price">1×$300.00</span>
                                            </div>
                                            <div class="cart-remove">
                                                <a class="action" href="#">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <!-- single item -->
                                        <!-- single item -->
                                        <li class="wimix_area">
                                            <a class="pix_product" href="#">
                                                <img alt="" src="img/product-pic/1-150x98.jpg">
                                            </a>
                                            <div class="product-details">
                                                <a href="#">Duis convallis</a>
                                                <span class="sig-price">1×$100.00</span>
                                            </div>
                                            <div class="cart-remove">
                                                <a class="action" href="#">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <!-- single item -->
                                    </ol>
                                    <div class="top-subtotal">
                                        Subtotal: <span class="sig-price">$400.00</span>
                                    </div>
                                    <div class="cart-button">
                                        <ul>
                                            <li>
                                                <a href="cart.html">View my cart <i class="fa fa-angle-right"></i></a>
                                            </li>
                                            <li>
                                                <a href="cart.html">Checkout <i class="fa fa-angle-right"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--header footer area start-->
    <div class="all_menu_area">
        <div class="menu_inner">
            <div class="container">
                <div class="full_menu clearfix">
                    <div class="new_menu">
                        <div class="drp-menu">
                            <div class="col-md-3 pr pl">
                                <div class="all_catagories">
                                    <div class="enable_catagories">
                                        <i class="fa fa-bars"></i>
                                        <span>All Categories</span>
                                        <i class="fa fa-angle-down"></i>
                                    </div>
                                </div>
                                <div class="catagory_menu_area">
                                    <div class="catagory_mega_menu">
                                        <div class="cat_mega_start">
                                            <ul class="list">
                                                <li class="next_area">
                                                    <a class="item_link" href="#">
                                                        <i class="fa fa-television"></i>
                                                        <span class="link_content">
                                                                    <span class="link_text">
                                                                        Electronics
                                                                        <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                                    </span>
                                                                </span>
                                                    </a>
                                                    <ul class="electronics_drpdown">
                                                        <li class="parent">
                                                            <a href="#"></a>
                                                            <div class="mega_menu">
                                                                <div class="mega_menu_coloumn">
                                                                    <ul>
                                                                        <li><a href="#">Men's</a></li>
                                                                        <li><a href="#">Hats</a></li>
                                                                        <li><a href="#">Mirriors</a></li>
                                                                        <li><a href="#">Singles</a></li>
                                                                    </ul>
                                                                </div>
                                                                <div class="mega_menu_coloumn">
                                                                    <ul>
                                                                        <li><a href="#">Sports& Outdoors</a></li>
                                                                        <li><a href="#">Smartphones</a></li>
                                                                        <li><a href="#">Womens</a></li>
                                                                        <li><a href="#">Health & Beauty</a></li>
                                                                    </ul>
                                                                </div>
                                                                <div class="mega_menu_coloumn">
                                                                    <ul>
                                                                        <li class="mega_content"><a
                                                                                href="#">Accessories</a></li>
                                                                        <li><a href="#">Hobbies</a></li>
                                                                        <li><a href="#">networking</a></li>
                                                                        <li><a href="#">accessories</a></li>
                                                                        <li><a href="#">electronics</a></li>
                                                                    </ul>
                                                                </div>
                                                                <div class="mega_menu_coloumn">
                                                                    <ul>
                                                                        <li><a href="#">Laptops & Accessories</a></li>
                                                                        <li><a href="#">hoodies</a></li>
                                                                        <li><a href="#">watches</a></li>
                                                                        <li><a href="#">flashlights</a></li>
                                                                        <li><a href="#">mirriors</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="differ_sec_area">
                                                    <a class="item_link" href="#">
                                                        <i class="fa fa-mobile"></i>
                                                        <span class="link_content">
                                                                    <span class="link_text">
                                                                        Smartphone & Tablets
                                                                        <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                                    </span>
                                                                </span>
                                                    </a>
                                                    <ul class="another_drop_menu">
                                                        <li class="discrip">
                                                            <a class="new_link_2 with_icon" href="#" tabindex="1">Posters</a>
                                                            <ul class="new_miup_menu">
                                                                <li>
                                                                    <ul class="new_mixup_tm">
                                                                        <li class="exact">
                                                                            <a class="new_link_8 with_icon" href="#"
                                                                               tabindex="1">Cocktail</a>
                                                                            <ul class="decent_mean_menu">
                                                                                <li>
                                                                                    <ul class="new_mixup_tm">
                                                                                        <li>
                                                                                            <a href="#"></a>Cost &
                                                                                            Jackets
                                                                                        </li>
                                                                                    </ul>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                        <li><a href="#">Furniture</a></li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li class="risk">
                                                            <a class="new_link_2 new_link_3 with_icon" href="#"
                                                               tabindex="1">Watches
                                                            </a>
                                                            <ul class="new_miup_menu">
                                                                <li>
                                                                    <ul class="new_mixup_tm">
                                                                        <li><a href="#">Women's</a></li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#">Pendants</a></li>
                                                        <li><a href="#">Chocklates</a></li>
                                                    </ul>
                                                </li>
                                                <li class="differ_sec_area">
                                                    <a class="item_link " href="#">
                                                        <i class="fa fa-gift"></i>
                                                        <span class="link_content">
                                                                    <span class="link_text">
                                                                        Health & Beauty
                                                                        <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                                    </span>
                                                                </span>
                                                    </a>
                                                    <ul class="another_drop_menu">
                                                        <li class="discrip">
                                                            <a class="new_link_2 new_link_4 with_icon" href="#"
                                                               tabindex="1">
                                                                <i class="fa fa-futbol-o"></i>
                                                                Sports & Outdoors
                                                            </a>
                                                        </li>
                                                        <li class="discrip">
                                                            <a class="new_link_2 new_link_4 with_icon" href="#"
                                                               tabindex="1">
                                                                <i class="fa fa-bullseye"></i>
                                                                Bags, Shoes & Accessories
                                                            </a>
                                                        </li>
                                                        <li class="discrip"><a class="new_link_2 new_link_4 with_icon"
                                                                               href="#" tabindex="1"><i
                                                                class="fa fa-file-image-o"></i>
                                                            Toys & Hobbies</a>
                                                        </li>
                                                        <li class="discrip">
                                                            <a class="new_link_2 new_link_4 with_icon" href="#"
                                                               tabindex="1"><i class="fa fa-television"></i>
                                                                Computer & Networking</a>
                                                        </li>
                                                        <li class="discrip">
                                                            <a class="new_link_2 new_link_4 with_icon" href="#"
                                                               tabindex="1">
                                                                <i class="fa fa-laptop"></i>
                                                                Laptops & Accessories
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a class="item_link item_link_2" href="#">
                                                        <i class="fa fa-heart"></i>
                                                        <span class="link_content">
                                                                    <span class="link_text">
                                                                        Jewelry & Watches
                                                                        <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                                    </span>
                                                                </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="item_link item_link_2" href="#">
                                                        <i class="fa fa-star"></i>
                                                        <span class="link_content">
                                                                    <span class="link_text">
                                                                        Flashlights & Lamps
                                                                        <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                                    </span>
                                                                </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="item_link item_link_2" href="#">
                                                        <i class="fa fa-lightbulb-o"></i>
                                                        <span class="link_content">
                                                                    <span class="link_text">
                                                                        Headlight
                                                                        <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                                    </span>
                                                                </span>
                                                    </a>
                                                </li>
                                                <li class="cost-menu">
                                                    <a class="item_link item_link_2" href="#">
                                                        <i class="fa fa-pie-chart"></i>
                                                        <span class="link_content">
                                                                    <span class="link_text">
                                                                        Cost & jackets
                                                                        <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                                    </span>
                                                                </span>
                                                    </a>
                                                </li>
                                                <li class="showmore-items shwitm">
                                                    <i class="fa fa-plus-square-o"></i>
                                                    <span>More Categories</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--menu area start-->
                            <div class="col-md-9 pl">
                                <div class="menu_area">
                                    <div class="menu">
                                        <nav>
                                            <ul>
                                                <li><a href="index.html">Home</a></li>
                                                <li><a href="about-us.html">About</a></li>
                                                <li><a href="cart.html">Cart</a></li>
                                                <li><a href="list-view.html">List</a></li>
                                                <li><a href="my.account.html">Account</a></li>
                                                <li><a href="simple-product.html">Product</a></li>
                                                <li><a href="address.html">Address</a></li>
                                                <li><a href="contact-us.html">Contact us</a></li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- mobile-menu-area-start -->
<div class="mobile-menu-area hidden-md hidden-lg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="mobile-menu">
                    <nav id="mobile-menu-active">
                        <ul id="nav">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about-us.html">About</a></li>
                            <li><a href="cart.html">Cart</a></li>
                            <li><a href="list-view.html">List</a></li>
                            <li><a href="my.account.html">Account</a></li>
                            <li><a href="simple-product.html">Product</a></li>
                            <li><a href="address.html">Address</a></li>
                            <li><a href="contact-us.html">Contact us</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- mobile-menu-area-end -->
<!--slider area start-->
<section class="slider-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="bend niceties preview-2">
                    <div id="ensign-nivoslider" class="slides">
                        <img src="img/slider/slider1_1-1.jpg" alt="" title="#slider-caption-1"/>
                        <img src="img/slider/slider1_2.jpg" alt="" title="#slider-caption-2"/>
                    </div>
                    <!-- direction 1 -->
                    <div id="slider-caption-1" class="t-cn slider-direction slider-one">
                        <div class="slider-progress"></div>
                        <div class="tld-f1">
                            <div class="layer-1-1 animated fadeInDown">
                                <h1> $320.00</h1>
                            </div>
                            <div class="layer-1-2 animated flipInX">
                                <h2>$245.00</h2>
                            </div>
                            <div class="layer-1-3 animated rotateInUpLeft">
                                <h1>NOKIA E600</h1>
                            </div>
                            <div class="layer-1-4  animated rotateInUpLeft">
                                <h3>SALE UO TO 30%</h3>
                            </div>
                            <div class="layer-1-5 animated rotateInUpLeft">
                                <a href="#">Shopping Now</a>
                            </div>
                        </div>
                        <div class="tld-f2">
                            <div class="layer-1-6 animated zoomIn">
                                <img src="img/slider/slider_8.png" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- direction 2 -->
                    <div id="slider-caption-2" class="slider-direction slider-two">
                        <div class="slider-progress"></div>
                        <div class="sld-fl">
                            <div class="layer-2-1 animated fadeInLeftBig">
                                <h1> $320.00</h1>
                            </div>
                            <div class="layer-2-2 animated slideInLeft">
                                <h2>$245.00</h2>
                            </div>
                            <div class="layer-2-3 animated slideInLeft">
                                <h1>MEN'S </h1>
                            </div>
                            <div class="layer-2-4 animated slideInLeft">
                                <h3>SALE UO TO 30%</h3>
                            </div>
                            <div class="layer-2-5 animated bounceInUp">
                                <a href="#">Shopping Now</a>
                            </div>
                        </div>
                        <div class="sld-fr">
                            <div class="layer-2-6 animated zoomIn">
                                <img src="img/slider/slider-9.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--slider area end-->
<div>
    <div class="cosmatics_heading">
        <h3 class="cosmatics_products">
            <i class="fa fa-tags"></i>
            <span>Hot deals</span>
        </h3>
    </div>
    <div id="hot-products"></div>
</div>

<div>
    <div class="new_product">
        <div class="product_heading">
            <i class="fa fa-play-circle"></i>
            <span>New products</span>
        </div>
    </div>
    <div id="new-products"></div>
</div>

<div>
    <div class="new_product">
        <div class="product_heading">
            <i class="fa fa-star"></i>
            <span>IDEA PRODUCTS</span>
        </div>
    </div>
    <div id="idea-products"></div>
</div>

<!--social design arae start-->
<div class="link_area">
    <div class="container">
        <div class="row">
            <div class="social_design on_right">
                <ul>
                    <li>
                        <a class="facebook" target="_blank" href="#facebook">
                                    <span>
                                        <i class="fa fa-facebook"></i>
                                        <span class="social-text">Follow via Facebook</span>
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a class="twitter" target="_blank" href="#twitter.com">
                                    <span>
                                        <i class="fa fa-twitter"></i>
                                        <span class="social-text">Follow via Twitter</span>
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a class="google-plus" target="_blank" href="#google-plus">
                                    <span>
                                        <i class="fa fa-google-plus"></i>
                                        <span class="social-text">Follow via Google +</span>
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a class="youtube" target="_blank" href="#youtube">
                                    <span>
                                        <i class="fa fa-youtube"></i>
                                        <span class="social-text">Follow via Youtube</span>
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a class="pinterest" target="_blank" href="#pinterest">
                                    <span>
                                        <i class="fa fa-pinterest"></i>
                                        <span class="social-text">Follow via Pinterest</span>
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a class="mail-to" target="_blank" href="mailto:lionthemes88@gmail.com">
                                    <span>
                                        <i class="fa fa-envelope-o"></i>
                                        <span class="social-text">Mail To Us</span>
                                    </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--social design arae end-->
<!--about us area-->
<div class="about_us_area">
    <div class="about_main">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="about_all">
                        <div class="single_about">
                            <div class="about_icon">
                                <span class="fa fa-truck"></span>
                            </div>
                            <div class="about_content">
                                <div class="about_text">Free Shipping</div>
                                <div class="about_prgph">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend
                                    libero felis, at interdum lorem efficitur et.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="about_all">
                        <div class="single_about">
                            <div class="about_icon">
                                <span class="fa fa-history"></span>
                            </div>
                            <div class="about_content">
                                <div class="about_text">Free Shipping</div>
                                <div class="about_prgph">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend
                                    libero felis, at interdum lorem efficitur et.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="about_all">
                        <div class="single_about">
                            <div class="about_icon">
                                <span class="fa fa-lock"></span>
                            </div>
                            <div class="about_content">
                                <div class="about_text">Free Shipping</div>
                                <div class="about_prgph">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend
                                    libero felis, at interdum lorem efficitur et.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--about us end-->
<!--footer top area start-->
<div class="footer_area">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="footer_menu">
                    <div class="news_heading_2">
                        <h3>Information </h3>
                    </div>
                    <div class="footer_menu">
                        <ul>
                            <li>
                                <a href="#">our blog</a>
                            </li>
                            <li>
                                <a href="#">about our shop</a>
                            </li>
                            <li>
                                <a href="#">secure shopping</a>
                            </li>
                            <li>
                                <a href="#">privecy policy</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="footer_menu">
                    <div class="news_heading_2">
                        <h3>My Account </h3>
                    </div>
                    <div class="footer_menu">
                        <ul>
                            <li>
                                <a href="my.account.html">My Account</a>
                            </li>
                            <li>
                                <a href="contact-us.html">Wishlist</a>
                            </li>
                            <li>
                                <a href="cart.html">Shopping Cart</a>
                            </li>
                            <li>
                                <a href="about-us.html">Checkout</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="footer_menu">
                    <div class="news_heading_2">
                        <h3> Our Services </h3>
                    </div>
                    <div class="footer_menu">
                        <ul>
                            <li>
                                <a href="#">Shipping & Returns</a>
                            </li>
                            <li>
                                <a href="#">Secure Shopping</a>
                            </li>
                            <li>
                                <a href="#">International Shipping</a>
                            </li>
                            <li>
                                <a href="#">Affiliates</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="footer_menu footer_menu_2">
                    <div class="news_heading_2">
                        <h3> Store Information </h3>
                    </div>
                    <ul>
                        <li>
                            <i class="fa fa-home"></i>
                            <p>My Company : 42 avenue des Champs Elysées 75000 France</p>
                        </li>
                        <li>
                            <i class="fa fa-phone"></i>
                            <p>Phone: (0123) 456789</p>
                        </li>
                        <li>
                            <i class="fa fa-envelope"></i>
                            <p>Email: admin@hastech.company</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--footer top area end-->
    <!--footer middle area start-->
    <div class="footer_middle">
        <div class="container">
            <div class="fotter_inner">
                <div class="middele_pic">
                    <img src="img/icon/payment-300x30.png" alt=""/>
                </div>
            </div>
        </div>
    </div>
</div>
<!--footer middle area end-->
<!--footer bottom area start-->
<div class="footer-bottom">
    <div class="container">
        <div class="widget-copyright text-center">
            Copyright &copy; 2017.Company name All rights reserved.<a target="_blank"
                                                                      href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </div>
    </div>
</div>
<!--footer bottom area end-->
<!--modal content start-->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-dialog-2">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="modal-product">
                    <div class="row">
                        <div class="new_port new_port_2">
                            <div class="port_pix">
                                <img src="img/product-pic/product_pic_2.jpg" alt="" id="modal-image">
                            </div>
                        </div>
                        <div class="elav_titel elav_titel_2">
                            <div class="elv_heading elv_heading_therteen">
                                <h3 id="modal-title">Donec non est at</h3>
                            </div>
                            <div class="elav_info">
                                <div class="price_box price_box_pb">
                                    <span class="spical-price spical-price-nk" id="modal-price">$250.00</span>
                                </div>
                                <form class="cart-btn-area cart-btn-area-dec" action="#">
                                    <a class="see-all" href="#">See all features</a><br>
                                    <input type="number" value="1">
                                    <button class="add-tocart add-tocart-2" type="submit">Add to cart</button>
                                </form>
                            </div>
                            <div class="evavet_description evavet_description_dec">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere metus vitae
                                    arcu imperdiet, id aliquet ante scelerisque. Sed sit amet sem vitae urna fringilla
                                    tempus.</p>
                            </div>
                            <div class="elavetor_social">
                                <h3 class="widget-title">Share this product</h3>
                                <br>
                                <ul class="social-link social-link-bbt">
                                    <li><a class="fb" data-original-title="facebook" href="#" title=""
                                           data-toggle="tooltip"><i class="fa fa-facebook"></i></a></li>
                                    <li><a class="twit" data-original-title="twitter" href="#" title=""
                                           data-toggle="tooltip"><i class="fa fa-twitter"></i></a></li>
                                    <li><a class="pinter" data-original-title="pinterest" href="#" title=""
                                           data-toggle="tooltip"><i class="fa fa-pinterest"></i></a></li>
                                    <li><a class="google+" href="#" title="Google+" data-target="#productModal"
                                           data-toggle="tooltip"><i class="fa fa-google-plus"></i></a></li>
                                    <li><a class="lindin" href="#" title="LinkedIn" data-target="#productModal"
                                           data-toggle="tooltip"><i class="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--modal content end-->


<!-- all js here -->
<!-- jquery latest version -->
<script src="js/vendor/jquery-1.12.0.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- nivo slider js -->
<script src="lib/js/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="lib/home.js" type="text/javascript"></script>
<!-- owl.carousel js -->
<script src="js/owl.carousel.min.js"></script>
<!-- meanmenu js -->
<script src="js/jquery.meanmenu.js"></script>
<!-- jquery-ui js -->
<script src="js/jquery-ui.min.js"></script>
<!-- easing js -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- mixitup js -->
<script src="js/jquery.mixitup.min.js"></script>
<!-- jquery.countdown js -->
<script src="js/jquery.countdown.min.js"></script>
<!-- wow js -->
<script src="js/wow.min.js"></script>
<!-- popup js -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- plugins js -->
<script src="js/plugins.js"></script>
<!-- main js -->
<script src="js/main.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        showNewList();
        showHotList();
        showideaList();
    });


    function showNewList(url) {
        $("#new-products").empty();
        $.ajax({
            url: "/products/new_list",
            type: "GET",
            dataType: "JSON",
            success: function (json) {
                let list = json.data;
                console.log("count=" + list.length);
                for (let i = 0; i < 5; i++) {
                    console.log(list[i].title);
                    let html = '<div class="owl-item" style="width: 293px;">' +
                        '<div class="col-md-12">' +
                        '<div class="all-pros  all-pros-2 animated fadeInUp">' +
                        '    <div class="single_product">' +
                        '        <span>New</span>' +
                        '    </div>' +
                        '    <div class="sinle_pic">' +
                        '        <a href="#">' +
                        '        <img class="primary-img" src="..#{image}collect.png" alt="" />' +
                        '        <img class="secondary-img" src="..#{image}collect.png" alt="" />' +
                        '        </a>' +
                        '    </div>' +
                        '    <div class="product-action" data-toggle="modal" data-target="#myModal">' +
                        '        <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview" >Quick View</button>   ' +
                        '    </div>' +
                        '    <div class="product_content">' +
                        '        <div class="usal_pro">' +
                        '            <div class="product_name_2">' +
                        '                <h2>' +
                        '                    <a href="simple-product.html?id=#{id}">#{title}</a>' +
                        '                </h2>' +
                        '            </div>' +
                        '            <div class="product_price">' +
                        '                <div class="price_rating">' +
                        '                    <a href="#"><i class="fa fa-star"></i></a>' +
                        '                    <a href="#"><i class="fa fa-star"></i></a>' +
                        '                    <a href="#">' +
                        '                    <i class="fa fa-star"></i>' +
                        '                    </a>' +
                        '                    <a href="#"><i class="fa fa-star"></i>' +
                        '                    </a>' +
                        '                    <a class="not-rated" href="#">' +
                        '                    <i class="fa fa-star-o"></i>' +
                        '                    </a>' +
                        '                </div>' +
                        '            </div>' +
                        '            <div class="price_box">' +
                        '                <span class="spical-price">￥#{price}</span>' +
                        '            </div>' +
                        '            <div class="last_button_area">' +
                        '                <ul class="add-to-links clearfix">' +
                        '                    <li class="addwishlist">' +
                        '                        <div class="yith-wcwl-add-button show" >' +
                        '                            <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i                                                class="fa fa-heart"></i></a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                    <li>' +
                        '                        <div class="new_act">' +
                        '                            <a class="button_act" data-quick-id="45" href="simple-product.html?id=#{id}" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                    <li class="addcompare">' +
                        '                        <div class="woocommerce product compare-button">' +
                        '                            <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                </ul>' +
                        '            </div>' +
                        '        </div>' +
                        '    </div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    html = html.replace(/#{id}/g, list[i].id);
                    html = html.replace(/#{title}/g, list[i].title);
                    html = html.replace(/#{price}/g, list[i].price);
                    html = html.replace(/#{image}/g, list[i].image);
                    $("#new-products").append(html);
                }
            }
        });
    }


    function showHotList() {
        $("#hot-products").empty();
        $.ajax({
            url: "/products/hot_list",
            type: "GET",
            dataType: "JSON",
            success: function (json) {
                let list = json.data;
                console.log("count=" + list.length);
                for (let i = 0; i < list.length; i++) {
                    console.log(list[i].title);
                    let html = '<div class="owl-item" style="width: 293px;">' +
                        '<div class="col-md-12">' +
                        '<div class="all-pros  all-pros-2 animated fadeInUp">' +
                        '    <div class="single_product">' +
                        '        <span>New</span>' +
                        '    </div>' +
                        '    <div class="sinle_pic">' +
                        '        <a href="#">' +
                        '        <img class="primary-img" src="..#{image}collect.png" alt="" />' +
                        '        <img class="secondary-img" src="..#{image}collect.png" alt="" />' +
                        '        </a>' +
                        '    </div>' +
                        '    <div class="product-action" data-toggle="modal" data-target="#myModal">' +
                        '        <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview">Quick View</button>   ' +
                        '    </div>' +
                        '    <div class="product_content">' +
                        '        <div class="usal_pro">' +
                        '            <div class="product_name_2">' +
                        '                <h2>' +
                        '                    <a href="simple-product.html?id=#{id}">#{title}</a>' +
                        '                </h2>' +
                        '            </div>' +
                        '            <div class="product_price">' +
                        '                <div class="price_rating">' +
                        '                    <a href="#"><i class="fa fa-star"></i></a>' +
                        '                    <a href="#"><i class="fa fa-star"></i></a>' +
                        '                    <a href="#">' +
                        '                    <i class="fa fa-star"></i>' +
                        '                    </a>' +
                        '                    <a href="#"><i class="fa fa-star"></i>' +
                        '                    </a>' +
                        '                    <a class="not-rated" href="#">' +
                        '                    <i class="fa fa-star-o"></i>' +
                        '                    </a>' +
                        '                </div>' +
                        '            </div>' +
                        '            <div class="price_box">' +
                        '                <span class="spical-price">￥#{price}</span>' +
                        '            </div>' +
                        '            <div class="last_button_area">' +
                        '                <ul class="add-to-links clearfix">' +
                        '                    <li class="addwishlist">' +
                        '                        <div class="yith-wcwl-add-button show" >' +
                        '                            <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i                                                class="fa fa-heart"></i></a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                    <li>' +
                        '                        <div class="new_act">' +
                        '                            <a class="button_act" data-quick-id="45" href="simple-product.html?id=#{id}" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                    <li class="addcompare">' +
                        '                        <div class="woocommerce product compare-button">' +
                        '                            <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                </ul>' +
                        '            </div>' +
                        '        </div>' +
                        '    </div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    html = html.replace(/#{id}/g, list[i].id);
                    html = html.replace(/#{title}/g, list[i].title);
                    html = html.replace(/#{price}/g, list[i].price);
                    html = html.replace(/#{image}/g, list[i].image);
                    $("#hot-products").append(html);
                }
            }
        });
    }

    function showideaList() {
        $("#idea-products").empty();
        $.ajax({
            url: "/products/idea_list",
            type: "GET",
            dataType: "JSON",
            success: function (json) {
                let list = json.data;
                console.log("count=" + list.length);
                for (let i = 0; i < 5; i++) {
                    console.log(list[i].title);
                    let html = '<div class="owl-item" style="width: 293px;">' +
                        '<div class="col-md-12">' +
                        '<div class="all-pros  all-pros-2 animated fadeInUp">' +
                        '    <div class="single_product">' +
                        '        <span>New</span>' +
                        '    </div>' +
                        '    <div class="sinle_pic">' +
                        '        <a href="#">' +
                        '        <img class="primary-img" src="..#{image}collect.png" alt="" />' +
                        '        <img class="secondary-img" src="..#{image}collect.png" alt="" />' +
                        '        </a>' +
                        '    </div>' +
                        '    <div class="product-action" data-toggle="modal" data-target="#myModal">' +
                        '        <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview" onclick="showModal()">Quick View</button>   ' +
                        '    </div>' +
                        '    <div class="product_content">' +
                        '        <div class="usal_pro">' +
                        '            <div class="product_name_2">' +
                        '                <h2>' +
                        '                    <a href="simple-product.html?id=#{id}">#{title}</a>' +
                        '                </h2>' +
                        '            </div>' +
                        '            <div class="product_price">' +
                        '                <div class="price_rating">' +
                        '                    <a href="#"><i class="fa fa-star"></i></a>' +
                        '                    <a href="#"><i class="fa fa-star"></i></a>' +
                        '                    <a href="#">' +
                        '                    <i class="fa fa-star"></i>' +
                        '                    </a>' +
                        '                    <a href="#"><i class="fa fa-star"></i>' +
                        '                    </a>' +
                        '                    <a class="not-rated" href="#">' +
                        '                    <i class="fa fa-star-o"></i>' +
                        '                    </a>' +
                        '                </div>' +
                        '            </div>' +
                        '            <div class="price_box">' +
                        '                <span class="spical-price">￥#{price}</span>' +
                        '            </div>' +
                        '            <div class="last_button_area">' +
                        '                <ul class="add-to-links clearfix">' +
                        '                    <li class="addwishlist">' +
                        '                        <div class="yith-wcwl-add-button show" >' +
                        '                            <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i                                                class="fa fa-heart"></i></a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                    <li>' +
                        '                        <div class="new_act">' +
                        '                            <a class="button_act" data-quick-id="45" href="simple-product.html?id=#{id}" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                    <li class="addcompare">' +
                        '                        <div class="woocommerce product compare-button">' +
                        '                            <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>' +
                        '                        </div>' +
                        '                    </li>' +
                        '                </ul>' +
                        '            </div>' +
                        '        </div>' +
                        '    </div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    html = html.replace(/#{id}/g, list[i].id);
                    html = html.replace(/#{title}/g, list[i].title);
                    html = html.replace(/#{price}/g, list[i].price);
                    html = html.replace(/#{image}/g, list[i].image);
                    $("#idea-products").append(html);
                }
            }
        });
    }
</script>
<script type="text/javascript">
    function showModal(id, title, price, image) {
        $("#myModal").on("show.bs.modal", function (e) {
            $("modal-id").html(id);
            $("#modal-title").html(title);
            $("#modal-price").html(price);
            $("#modal-imgae").src = (image);
        })
    }
</script>
</body>
<style>
    #new-products {
        display: flex;
        justify-content: space-around;
    }

    #hot-products {
        display: flex;
        justify-content: space-around;
    }

    #idea-products {
        display: flex;
        justify-content: space-around;
    }
</style>

<script type="text/javascript">

    $("#Search-btn").click(function () {
        let title = $("#mix_search").val();
        console.log(title)
        location.href = "Search-list.html?title="+encodeURI(encodeURI(title));
    });

</script>
</html>


